<template>
  <div class="analysis-card">
    <h3 class="analysis-title">流量数据分析</h3>

    <!-- 核心问题梳理 -->
    <div class="analysis-section" data-section="核心问题梳理">
      <h4 class="section-subtitle">一、核心问题梳理</h4>
      <ul class="problem-list">
        <li v-for="(item, index) in parsedProblems" :key="index" class="problem-item">
          <div class="problem-header">{{ item.problem }}</div>
          <div class="problem-analysis">{{ item.analysis }}</div>
        </li>
      </ul>
    </div>

    <!-- 运营方向建议 -->
    <div class="analysis-section" data-section="运营方向建议">
      <h4 class="section-subtitle">二、运营方向建议</h4>
      <div class="suggestion-table">
        <table>
          <thead>
            <tr>
              <th>模块</th>
              <th>优化方向</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in processedOperationData.模块" :key="index">
              <td>{{ item }}</td>
              <td>{{ processedOperationData.优化方向[index] }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 行动建议 -->
    <div class="analysis-section" data-section="行动建议">
      <h4 class="section-subtitle">三、行动建议</h4>
      <div class="action-table">
        <table>
          <thead>
            <tr>
              <th>问题点</th>
              <th>推荐动作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in aiContent?.['三、行动建议']['问题点']" :key="index">
              <td>{{ processText(item) }}</td>
              <td>
                <ul class="action-list" v-if="getValidActions(aiContent?.['三、行动建议']['推荐动作'][index])?.length">
                  <li v-for="(action, actionIndex) in getValidActions(aiContent?.['三、行动建议']['推荐动作'][index])" 
                      :key="actionIndex"
                  >
                    {{ action }}
                  </li>
                </ul>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { AnalysisResult } from '../../../api'
import { computed } from 'vue'

interface Props {
  aiContent: AnalysisResult | null
  sectionData?: any
}

interface ProblemAnalysis {
  problem: string
  analysis: string
}

const props = defineProps<Props>()

// 处理文本内容，去除【】包裹
const processText = (text: string | undefined) => {
  if (!text) return ''
  const trimmed = text.trim()
  if (trimmed.startsWith('【') && trimmed.endsWith('】')) {
    return trimmed.slice(1, -1)
  }
  return trimmed
}

// 解析问题和分析
const parsedProblems = computed(() => {
  if (!props.aiContent?.['一、核心问题梳理']) return []
  
  return props.aiContent['一、核心问题梳理']
    .map((item: string) => {
      // 修改正则表达式，允许【】内容为空
      const match = item.match(/【(.*?)】，(.*)/)
      if (!match) {
        return {
          problem: '',
          analysis: ''
        }
      }
      
      return {
        problem: match[1],
        analysis: match[2]
      }
    })
})

// 处理运营方向建议数据
const processedOperationData = computed(() => {
  if (!props.aiContent?.['二、运营方向建议']) return { 模块: [], 优化方向: [] }
  
  const data = props.aiContent['二、运营方向建议']
  return {
    模块: data.模块?.map(processText) || [],
    优化方向: data.优化方向?.map(processText) || []
  }
})

// 处理推荐动作数据
const getValidActions = (actions: string[] | undefined) => {
  if (!actions) return []
  return actions
    .filter(action => action && action.trim())
    .map(processText)
}
</script>

<style scoped>
.analysis-card {
  margin-bottom: 20px;
  padding: 15px 20px;
  background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  color: #ffffff;
  break-inside: avoid-page !important;
  page-break-inside: avoid !important;
}

.analysis-section {
  margin-bottom: 25px;
  break-inside: avoid-page !important;
  page-break-inside: avoid !important;
}

.analysis-section:last-child {
  margin-bottom: 0;
}

.analysis-title {
  font-size: 18px;
  color: #60a5fa;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid rgba(96, 165, 250, 0.3);
}

.problem-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.problem-item {
  position: relative;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.4;
}

.problem-header {
  color: #60a5fa;
  font-weight: 600;
  margin-bottom: 8px;
  padding-left: 16px;
  position: relative;
}

.problem-header::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #60a5fa;
  font-size: 24px;
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
}

.problem-analysis {
  color: #e2e8f0;
  padding-left: 16px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
}

th {
  background: rgba(96, 165, 250, 0.2);
  font-weight: 600;
  color: #60a5fa;
}

tr:last-child td {
  border-bottom: none;
}

tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.05);
}

tr:nth-child(odd) {
  background: transparent;
}

tr:hover {
  background: rgba(255, 255, 255, 0.1);
}

.action-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.action-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 8px;
  line-height: 1.4;
}

.action-list li:last-child {
  margin-bottom: 0;
}

.action-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #60a5fa;
  font-size: 16px;
  line-height: 1;
  top: 50%;
  transform: translateY(-50%);
}

.suggestion-table,
.action-table {
  break-inside: avoid-page !important;
  page-break-inside: avoid !important;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .analysis-card {
    padding: 20px;
  }

  .analysis-title {
    font-size: 18px;
    margin-bottom: 16px;
  }

  th, td {
    padding: 10px 12px;
  }

  .problem-item {
    padding: 12px 16px 12px 32px;
  }

  .problem-item::before {
    left: 16px;
  }
}

/* 添加总标题样式 */
.main-title {
  font-size: 24px;
  font-weight: bold;
  color: #60a5fa;
  margin-bottom: 25px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  padding-bottom: 15px;
  border-bottom: 3px solid rgba(96, 165, 250, 0.3);
}

/* 更新子标题样式 */
.section-subtitle {
  font-size: 14px;
  color: #60a5fa;
  margin-bottom: 12px;
  padding-left: 8px;
  border-left: 3px solid #60a5fa;
}
</style> 